import React, { useState, useEffect } from 'react';
import { 
  Table, 
  Tag, 
  Space, 
  Button, 
  Modal, 
  Form, 
  Input, 
  Select, 
  DatePicker, 
  Upload, 
  Progress,
  Popover,
  Typography,
  message
} from 'antd';
import { 
  PlusOutlined, 
  UploadOutlined, 
  EditOutlined, 
  DeleteOutlined,
  FileTextOutlined,
  LinkOutlined
} from '@ant-design/icons';
import api from '../utils/api';

// 状态选项 - 与TaskManagementPage中的TASK_STATUS保持一致
const STATUS_OPTIONS = {
  ALL: '全部', // 添加全部选项
  COMPLETED: '已完成',
  IN_PROGRESS: '进行中',
  NOT_STARTED: '未开始',
  TEST: '测试中'
};

const TaskSearchBar = ({ onSearch, handleCompleteTask }) => {
  const [taskName, setTaskName] = useState('');
  const [projectId, setProjectId] = useState('');
  const [status, setStatus] = useState('');
  const [taskDetail, setTaskDetail] = useState('');
  const [projects, setProjects] = useState([]);
  const [loading, setLoading] = useState(false);

  // 获取项目列表
  useEffect(() => {
    const fetchProjects = async () => {
      setLoading(true);
      try {
        const response = await api.get('/api/project/list');
        if (response.data && response.data.code === '200') {
          setProjects(response.data.data || []);
        } else {
          console.error('获取项目列表失败:', response.data.message);
        }
      } catch (error) {
        console.error('获取项目列表异常:', error);
      } finally {
        setLoading(false);
      }
    };
    fetchProjects();
  }, []);

  const handleSearch = (e) => {
    e.preventDefault();
    // 直接传递 projectId
    onSearch({ taskName, projectId, status, taskDetail });
  };

  return (
    <div className="page-header" style={{ display: 'flex', alignItems: 'center' ,margin: '30px 0 20px 0'}}>
      <form onSubmit={handleSearch} style={{ display: 'flex', alignItems: 'center', marginRight: 20 }}>
        <div style={{ marginRight: 20 }}>
          <label>任务名称：</label>
          <Input
            placeholder="搜索任务"
            style={{ marginLeft: 1, width: 100, borderRadius: '4px', border: '1px solid #d9d9d9' }}
            allowClear
            value={taskName}
            onChange={(e) => setTaskName(e.target.value)}
          />
        </div>
        <div style={{ marginRight: 20 }}>
          <label>项目名称：</label>
          <Select
            placeholder="选择项目"
            style={{ marginLeft: 1, width: 150 }}
            allowClear
            value={projectId}
            onChange={(value) => setProjectId(value)}
            loading={loading}
          >
            <Select.Option value="">全部</Select.Option>
            {projects.map((project) => (
              <Select.Option key={project.id} value={project.id}>
                {project.projectName}
              </Select.Option>
            ))}
          </Select>
        </div>
        <div style={{ marginRight: 20 }}>
          <label>当前状态：</label>
          <Select
            placeholder="选择状态"
            style={{ marginLeft: 1, width: 100 }}
            allowClear
            value={status}
            onChange={(value) => setStatus(value)}
          >
            {Object.entries(STATUS_OPTIONS).map(([value, text]) => (
              <Select.Option key={value} value={value}>{text}</Select.Option>
            ))}
          </Select>
        </div>
        <div style={{ marginRight: 20 }}>
          <label>任务详情：</label>
          <Input
            placeholder="搜索详情"
            style={{ marginLeft: 1, width: 200, borderRadius: '4px', border: '1px solid #d9d9d9' }}
            allowClear
            value={taskDetail}
            onChange={(e) => setTaskDetail(e.target.value)}
          />
        </div>
        <Button type="primary" htmlType="submit">搜索</Button>
        <Button 
          type="primary" 
          icon={<PlusOutlined />} 
          onClick={handleCompleteTask}
          style={{ marginLeft: 16 }}
        >
          添加任务
        </Button>
      </form>
    </div>
  );
};

export default TaskSearchBar;
